<template>
  <el-dialog title="添加员工" :visible="showDialog" width="50%" @close="onclose" @closed="onClosed">
    <el-form ref="formRef" label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="form.formOfEmployment" style="width: 100%" placeholder="">
          <el-option v-for="item in hireType" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="form.workNumber"></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="departmentName">
        <!-- :options="数据源" -->
        <!-- :props="配置选项" -->
        <el-cascader
          v-model="form.departmentName"
          :options="treeData"
          :props="casProps"
          style="width: 100%"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="入职转正 " prop="timeOfEntry">
        <el-date-picker
          v-model="form.timeOfEntry"
          type="daterange"
          range-separator="至"
          start-placeholder="入职日期"
          end-placeholder="转正日期"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onclose">取 消</el-button>
      <el-button type="primary" size="mini" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import empConst from '@/api/constant/employees.js'

import { getDepartListAPI } from '@/api/depart.js'
import { arr2Tree } from '@/utils'
import { AddEmpAPI } from '@/api/emp.js'
export default {
  name: 'AddEmp',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hireType: empConst.hireType,
      form: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: [],
        timeOfEntry: [],
        correctionTime: ''
      },
      formRules: {
        username: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请填写正确的手机号', trigger: 'blur' }
        ],
        formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'change' }],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' },
          { pattern: /^\d{4,8}$/, message: '工号必须是4-8位数字', trigger: 'blur' }
        ],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
        timeOfEntry: [{ required: true, message: '入职/转正时间不能为空', trigger: 'change' }]
      },
      // 级联选择器的数据源
      treeData: [],
      // 级联选择器的配置项
      casProps: {
        label: 'name',
        value: 'name',
        // 打开子菜单的方式
        expandTrigger: 'hover',
        // 允许用户选中任何一级的节点
        checkStrictly: true
      }
    }
  },
  created() {
    this.initgetDepartList()
  },
  methods: {
    onclose() {
      this.$emit('update:showDialog', false)
    },
    onClosed() {
      this.$refs.formRef.resetFields()
    },
    onConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        const timeArr = [...this.form.timeOfEntry]
        const form = {
          ...this.form,
          departmentName: [...this.form.departmentName].pop(),
          correctionTime: timeArr.pop(),
          timeOfEntry: timeArr.pop()
        }
        await AddEmpAPI(form)
        this.$message.success('添加成功')
        this.initgetDepartList()
        // console.log(form)
        this.$emit('update:showDialog', false)
      })
    },
    async initgetDepartList() {
      const result = await getDepartListAPI()
      // console.log(result)
      this.treeData = arr2Tree(result.data.depts, '')
    }
  }
}
</script>

<style lang="scss" scoped></style>
